<template>
  <div>
    <el-dialog title="个人信息" :visible.sync="userInfo" width="30%" center="">
      <user-info></user-info>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userInfo = false">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="editPassword" width="40%" center="">
      <edit-password></edit-password>
      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button type="primary" @click="editPassword = false">确定</el-button>-->
      <!--</span>-->
    </el-dialog>
    <el-dropdown @command="handleCommand">
      <el-avatar icon="el-icon-user-solid"></el-avatar>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
        <el-dropdown-item command="EditPassword">修改密码</el-dropdown-item>
        <el-dropdown-item command="exit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>

</template>

<script>
  import UserInfo from '../user/UserInfo'
  import EditPassword from '@/components/user/EditPassword'
  export default {
    data() {
      return {
        userInfo: false,
        editPassword: false
      }
    },
    components: {
      UserInfo,
      EditPassword
    },
    methods: {
      handleCommand(command) {
        if(command == 'userInfo') {
          this.userInfo = true;
        } else if(command == 'EditPassword') {
          this.editPassword = true;
        } else {
          this.$confirm('退出后需要重新输入密码, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push("/exit")
          }).catch(() => {
          });
        }
      }
    }
  }
</script>

<style>

</style>
